import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css'

class Box extends Component {
    constructor() {
        super();
        // console.log("Box Constructor")
    }

    componentDidMount() {
        // console.log("Box Mount")
    }

    componentDidUpdate() {
        // console.log("Box Update");
    }

    componentWillUnmount() {
        console.log("Box Unmount");
    }

    // 使用setState的回调函数完成父子组件消息的传递
    // 此方法不用将子组件所有属性都保存到父组件上
    // 还有一种类似的方法，使用useEffect和useState可完成双向信息传递
    // componentDidUpdate(prevProps) {
    //     // 当父组件传递的 x 发生变化时，更新内部状态
    //     if (prevProps.x !== this.props.x) {
    //         this.setState({
    //             x: this.props.x,
    //         });
    //     }
    // }

    // ClickLeft = (step) => {
    //     this.setState(
    //         (prevState) => ({ x: prevState.x - step }),
    //         () => this.props.setX({ id: this.props.id, x: this.state.x })
    //     );
    // };

    // ClickRight = (step) => {
    //     this.setState(
    //         (prevState) => ({ x: prevState.x + step }),
    //         () => this.props.setX({ id: this.props.id, x: this.state.x })
    //     );
    // };


    render() {
        console.log("Box Render");

        // const step = 10;
        let styles = {
            width: "50px",
            height: "50px",
            backgroundColor: "orange",
            color: "white",
            fontWeight: 800,
            lineHeight: "50px",
            textAlign: "center",
            borderRadius: "5px",
            marginLeft: `${this.props.box.x}px`,
        }

        // console.log(this.state);
        // console.log(this.props);
        // console.log(this.props.box.x);
        
        this.props.box.x === 0 && (styles.backgroundColor = 'green')

        return (<React.Fragment>
            <div id="box" className="box" style={styles}>{this.props.box.x}</div>
            <button type="button" className="btn btn-primary m-2" onClick={() => this.props.onClickLeft(this.props.box)}>Left</button>
            <button type="button" className="btn btn-success m-2" onClick={() => this.props.onClickRight(this.props.box)}>Right</button>
            <button type="button" className="btn btn-danger m-2" onClick={() => this.props.onClickDelete(this.props.box)}>Delete</button>
        </React.Fragment>);
    }
}

export default Box;